<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let data = [
            { id: 1, pid: '', name: '小米' },
            { id: 2, pid: '1', name: '小米6' },
            { id: 3, pid: '1', name: '小米10' },
            { id: 4, pid: '3', name: '小米10-1' },
            { id: 5, pid: '3', name: '小米10-2' },
            { id: 6, pid: '', name: '华为' },
            { id: 7, pid: '6', name: '华为2' },
            { id: 8, pid: '6', name: '华为2' },
            { id: 9, pid: '', name: 'oppo' },
            { id: 10, pid: '', name: 'vivo' }
        ]
        function getTree(list, pid) {
            let arr = []
            list.forEach(item => {
                if (item.pid == pid) {
                    arr.push(item)
                    let children = getTree(list, item.id)
                    if (children.length) {
                        item.children = children
                    }
                }
            })
            return arr
        }
        console.log(getTree(data, ''));
    </script>
</body>

</html>